<script src="js/echarts.js"></script>
<script src="js/index_statics.js"></script>
<script src="js/index_statics_bar.js"></script>
<script src="js/index_statics_pie.js"></script>
<script src="js/index_goods_range.js"></script>
<style>
    .row {
        margin-top: -40px;
    }

    .top_statics {
        width: 100%;
        height: 100px;
    }

    .cycle {
        width: 18%;
        height: 100px;
        border-radius: 6px;
        float: left;
        margin-left: 28px;
        background: #ffffff;
    }

    .cycle-top {
        height: 40px;
        line-height: 40px;
        padding-left: 30px;
        padding-top: 10px;
        font-size: 16px;
        font-weight: 700;
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        color: #ffffff;
        font-style: normal;
    }

    .cycle-bottom {
        padding-left: 30px;
    }

    .cycle-30 {
        height: 50px;
        line-height: 50px;
        float: left;
        font-size: 32px;
        /*padding-left: 40px;*/
        font-weight: 700;
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        color: #ffffff;
        font-style: normal;
    }

    .cycle-70 {
        height: 50px;
        line-height: 50px;
        float: left;
        font-size: 16px;
        padding-left: 10px;
        font-weight: 700;
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        color: #ffffff;
        font-style: normal;
        margin-top: 3px;
    }

    .icon_color_black {
        color: #3D592F;
        font-size: 30px;
    }

    .user_chart {
        /*width: 97%;*/
        height: 400px;
        margin: 20px 24px 20px 28px;
        background: #ffffff;
        border-radius: 6px;
    }

    .clearfix {
        position: relative;
    }

    .select_time {
        width: 240px;
        /* border-radius: 5px; */
        float: right;
        /*background: #CCCCCC;*/
        right: 30px;
        top: 20px;
        position: absolute;
        z-index: 11;
    }

    .select_time span {
        display: block;
        width: 70px;
        height: 30px;
        float: left;
        /* background: #4095e5; */
        text-align: center;
        line-height: 30px;
        color: #666666;
        cursor: pointer;
        border-radius: 20px;
        margin-left: 10px;
        border: 1px solid #bbbbbb;
    }

    .select_time .active {
        background: #3c8dbc;
        color: #FFFFFF;
    }

    .middle-statics {
        height: 194px;
        margin: 20px 24px 20px 28px;
        border-radius: 6px;
        background-color: #ffffff;
    }

    .chart_title {
        position: absolute;
        left: 30px;
        top: 20px;
        font-size: 16px;
        font-weight: 700;
    }

    .middle-left {
        width: 63px;
        height: 63px;
        background-color: #c8afaf;
        border-radius: 50%;
        float: left;
        margin: 20px auto;
        position: relative;
    }

    .middle-left img {
        position: absolute;
        left: 0px;
        margin: auto;
        right: 0px;
        top: 0px;
        bottom: 4px;
    }

    .middle-right {
        width: 162px;
        height: 100px;
        line-height: 100px;
        margin-left: 80px;
        padding-top: 25px;
    }

    .middle-wai {
        height: 150px;
        line-height: 150px;
        width: 262px;
        padding: 20px;
        float: left
    }

    .middle-top-t {
        height: 30px;
        line-height: 30px;
        color: #FF112E;
        font-size: 26px;
        font-weight: 400;
    }

    .middle-bottom-t {
        height: 30px;
        line-height: 30px;
        color: #c8afaf;
        font-size: 14px;
        font-weight: 400;
    }

    .goods_range {
        width: 49%;
        height: 490px;
        border-radius: 6px;
        border: 1px solid #e6edf7;
        float: left;
        background: #fff;
    }

    .buy_range {
        width: 49%;
        height: 490px;
        border-radius: 6px;
        border: 1px solid #e6edf7;
        float: left;
        margin-left: 30px;
        background: #fff;
    }

    .first_col {
        width: 15%;
        float: left;
        text-align: left;
        padding-left: 33px;
    }

    .second_col {
        width: 21%;
        float: left;
        text-align: left;
    }

    .col_goods {
        width: 16%;
        float: left;
        text-align: center;
        position: relative;
    }

    .code:after {
        content: "\25B2";
        position: absolute;
        left: 96px;
        top: -4px;
        font-size: 12px;
    }

    .end_col {
        width: 16%;
        float: left;
        text-align: center;
        position: relative;
    }

    .goods_title {
        height: 40px;
        line-height: 40px;
        width: 96%;
        margin: auto;
    }

    .goods_content {
        height: 70px;
        line-height: 70px;
        border-bottom: 1px solid rgb(204 204 204 / 40%);
        width: 96%;
        margin: auto;
    }

    .good_img {
        width: 42px;
        height: 42px;
        border-radius: 6px;
    }

    .sort_img1 {
        width: 10px;
        height: 10px;
        position: absolute;
        top: 20px;
    }

    .sort_img2 {
        width: 10px;
        height: 10px;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        position: absolute;
        top: 12px;
    }
</style>
<div class="main">
    <div class="top_statics">
        <div class="cycle" style="background-color: #767fd0">
            <div class="cycle-top">今日销售额</div>
            <div class="cycle-bottom">
                <div class="cycle-30">
                    {{$staticsData['todayPayTotal']}}
                </div>
                <div class="cycle-70">
                    {{$staticsData['payTotalPercent']}}%
                </div>
            </div>

        </div>
        <div class="cycle" style="background-color: #5591c8">

            <div class="cycle-top">今日订单量</div>
            <div class="cycle-bottom">
                <div class="cycle-30">
                    {{$staticsData['todayOrder']}}
                </div>
                <div class="cycle-70">
                    {{$staticsData['todayOrderPercent']}}%
                </div>
            </div>
        </div>
        <div class="cycle" style="background-color: #ae9951">

            <div class="cycle-top">今日商品销售份额</div>
            <div class="cycle-bottom">
                <div class="cycle-30">
                    {{$staticsData['todayGoods']}}
                </div>
                <div class="cycle-70">
                    {{$staticsData['todayGoodsPercent']}}%
                </div>
            </div>
        </div>
        <div class="cycle" style="background-color: #d4829f">

            <div class="cycle-top">今日访问量</div>
            <div class="cycle-bottom">
                <div class="cycle-30">
                    {{$staticsData['todayAccess']}}
                </div>
                <div class="cycle-70">
                    {{$staticsData['todayAccessPercent']}}%
                </div>
            </div>
        </div>
        <div class="cycle" style="background-color: #60a881">

            <div class="cycle-top">今日新增用户量</div>
            <div class="cycle-bottom">
                <div class="cycle-30">
                    {{$staticsData['todayAdd']}}
                </div>
                <div class="cycle-70">
                    {{$staticsData['todayUserAddPercent']}}%
                </div>
            </div>
        </div>
    </div>

    <div class="middle-statics">
        <div style="font-size: 16px; font-weight: 700;padding-top: 20px;padding-left: 30px">待办事项</div>
        <div style="height: 150px;padding-left: 10px">
            <a href="/admin/order">
                <div class="middle-wai">
                    <div class="middle-left">
                        <img src="logo.png">
                    </div>
                    <div class="middle-right">
                        <div class="middle-top-t">{{$middleData['dfh']}}</div>
                        <div class="middle-bottom-t">待发货订单</div>
                    </div>
                </div>
            </a>
            <a href="/admin/order-refund">
                <div class="middle-wai">
                    <div class="middle-left">
                        <img src="logo2.png">
                    </div>
                    <div class="middle-right">
                        <div class="middle-top-t">{{$middleData['tksb']}}</div>
                        <div class="middle-bottom-t">退款失败订单</div>
                    </div>
                </div>
            </a>
            <a href="/admin/crops-cfg">
                <div class="middle-wai">
                    <div class="middle-left">
                        <img src="logo3.png">
                    </div>
                    <div class="middle-right">
                        <div class="middle-top-t">{{$middleData['ysh_goods']}}</div>
                        <div class="middle-bottom-t">已收获商品</div>
                    </div>
                </div>
            </a>
            <a href="/admin/crops-cfg">
                <div class="middle-wai">
                    <div class="middle-left">
                        <img src="logo4.png">
                    </div>
                    <div class="middle-right">
                        <div class="middle-top-t">{{$middleData['kcyj']}}</div>
                        <div class="middle-bottom-t">库存预警商品</div>
                    </div>
                </div>
            </a>
            <a href="/admin/crops-cfg">
                <div class="middle-wai">
                    <div class="middle-left">
                        <img src="logo5.png">
                    </div>
                    <div class="middle-right">
                        <div class="middle-top-t">{{$middleData['jjxj']}}</div>
                        <div class="middle-bottom-t">即将下架商品</div>
                    </div>
                </div>
            </a>
            <a href="/admin/partner">
                <div class="middle-wai">
                    <div class="middle-left">
                        <img src="logo6.png">
                    </div>
                    <div class="middle-right">
                        <div class="middle-top-t">{{$middleData['partner']}}</div>
                        <div class="middle-bottom-t">社区合伙人消息</div>
                    </div>
                </div>
            </a>
        </div>
    </div>

    {{--    报表--}}
    <div class="user_chart">
        <div class="clearfix">
            <div class="chart_title">销量趋势</div>
            <div class="select_time" id="order_range">
                <span class="active" data-type="day">今日</span>
                <span data-type="week">近一周</span>
                <span data-type="month">近30日</span>
            </div>

        </div>
        <div id="chart1" style="height: 100%;width: 100%;margin: 20px 0px"></div>
    </div>
    <div class="user_chart">
        <div class="clearfix">
            <div class="chart_title">访问用户</div>
            <div class="select_time" id="access_range">
                <span class="active" data-type="day">今日</span>
                <span data-type="week">近一周</span>
                <span data-type="month">近30日</span>
            </div>

        </div>
        <div id="chart2" style="height: 100%;width: 100%;margin: 20px 0px"></div>
    </div>
    <div class="user_chart">
        <div class="clearfix">
            <div class="chart_title">商品销售分类占比</div>
            <div class="select_time" id="goods_range">
                <span class="active" data-type="day">今日</span>
                <span data-type="week">近一周</span>
                <span data-type="month">近30日</span>
            </div>

        </div>
        <div id="chart3" style="height: 100%;width: 100%;margin: 20px 0px"></div>
    </div>
    <div class="user_chart" style="background: #ecf0f5;height: 490px">
        <div class="goods_range">
            <div class="clearfix">
                <div class="chart_title">商品排行榜</div>
                <div class="select_time" id="goods_sale_range">
                    <span class="active" data-type="day">今日</span>
                    <span data-type="week">近一周</span>
                    <span data-type="month">近30日</span>
                </div>
            </div>
            <div style="margin-top: 70px">
                <div class="goods_title">
                    <div class="first_col">排名</div>
                    <div class="second_col">商品信息</div>
                    <div class="col_goods">销售额(元)<img class="sort_img1" onclick="filterGoodsData('pay_total','desc')" src="sort.png"><img src="sort.png" onclick="filterGoodsData('pay_total','asc')" class="sort_img2"></div>
                    <div class="col_goods">销量(份)<img class="sort_img1" onclick="filterGoodsData('num','desc')" src="sort.png"><img src="sort.png" onclick="filterGoodsData('num','asc')"   class="sort_img2"></div>
                    <div class="col_goods">访问量<img class="sort_img1" onclick="filterGoodsData('access','desc')" src="sort.png"><img src="sort.png" onclick="filterGoodsData('access','asc')"    class="sort_img2"></div>
                    <div class="end_col">转化率</div>
                </div>
                <div id="goods_range_list">

                </div>
                <div id="loading" style="text-align: center;height: 200px;line-height: 200px"><img width="100px" height="100px" src="loading.gif"></div>
            </div>
        </div>
        <div class="buy_range">
            <div class="clearfix">
                <div class="chart_title">用户购买排行榜</div>
                <div class="select_time" id="buy_range">
                    <span class="active" data-type="day">今日</span>
                    <span data-type="week">近一周</span>
                    <span data-type="month">近30日</span>
                </div>

            </div>
            <div style="margin-top: 70px">
                <div class="goods_title">
                    <div class="first_col">排名</div>
                    <div class="second_col" style="width: 30%">用户</div>
                    <div class="col_goods" style="width: 30%">购买额(元)<img class="sort_img1" onclick="filterUserBuyData('pay_total','desc')" src="sort.png"><img src="sort.png" onclick="filterUserBuyData('pay_total','asc')" class="sort_img2"></div>
                    <div class="col_goods">购买量(份)<img class="sort_img1" onclick="filterUserBuyData('num','desc')" src="sort.png"><img src="sort.png" onclick="filterUserBuyData('num','asc')"   class="sort_img2"></div>
                </div>
                <div id="buy_range_list">

                </div>
                <div id="loading_buy" style="text-align: center;height: 200px;line-height: 200px"><img width="100px" height="100px" src="loading.gif"></div>
            </div>
        </div>
    </div>
</div>
<script>
    $("#order_range").on("click", "span", function () {
        // 点击当前a 高亮显示 调用active
        $(this)
            .addClass("active")
            .siblings("span")
            .removeClass("active");
        loadUserOrderChartData(this.dataset.type)

    });
    $("#access_range").on("click", "span", function () {
        // 点击当前a 高亮显示 调用active
        $(this)
            .addClass("active")
            .siblings("span")
            .removeClass("active");
        loadUserChartData2(this.dataset.type)

    });
    $("#goods_range").on("click", "span", function () {
        // 点击当前a 高亮显示 调用active
        $(this)
            .addClass("active")
            .siblings("span")
            .removeClass("active");
        loadGoodsChartData1(this.dataset.type)

    });
    let timeType = 'day';
    $("#goods_sale_range").on("click", "span", function () {
        // 点击当前a 高亮显示 调用active
        $(this)
            .addClass("active")
            .siblings("span")
            .removeClass("active");
        timeType = this.dataset.type;
        $('#goods_range_list').html('');
        $('#loading').css('display','block')
        loadGoodsSaleRange(this.dataset.type)

    });

    function filterGoodsData(sort_key, sort) {
        $('#goods_range_list').html('');
        $('#loading').css('display','block');
        loadGoodsSaleRange(timeType, sort_key, sort);
    }

    let timeType2 = 'day';
    $("#buy_range").on("click", "span", function () {
        // 点击当前a 高亮显示 调用active
        $(this)
            .addClass("active")
            .siblings("span")
            .removeClass("active");
        timeType2 = this.dataset.type;
        $('#buy_range_list').html('');
        $('#loading_buy').css('display','block')
        loadUserBuyRange(this.dataset.type)

    });

    function filterUserBuyData(sort_key, sort) {
        $('#buy_range_list').html('');
        $('#loading_buy').css('display','block');
        loadUserBuyRange(timeType2, sort_key, sort);
    }
</script>
